<template>
  <div class="web-windows" @click="menuData.show=false">
    <explorer
      v-for="(item,index) in explorer"
      :key="index"
      class="explorer"
      :data="item"
      @click.native="activeExplorer(item,index)"
      @explorerClose.stop="closeExplorer(item,index)"
      @explorerMin.stop="minimizeExplorer(item,index)"
      @explorerMax="maximizeExplorer(item,index)"
      @explorerTack="tackExplorer(item,index)"
      @explorerDrag="dragExplorer($event,item,index)"
      @explorerOpen="openExplorer"
    />
    <desk-top
      class="desktop"
      :data="desktop"
      @deskItemDblclick="openExplorer"
      @deskItemRightClick="openDeskItemContextMenu"
      @deskTopRightClick="unhandleEvent($event)"
    />
    <start-menu
      v-show="startMenuShow"
      class="startmenu"
      :user="user"
      :menu="menu"
      @signOut="signOut"
      @menuClick="openExplorer"
      @menuRightClick="openStartMenuContextMenu"
      @userConfig="unhandleEvent($event)"
      @systemConfig="unhandleEvent($event)"
      @toggle="unhandleEvent($event)"
      @contextmenu.native.prevent
      @mouseleave.native="menuData.show ? startMenuShow : startMenuShow=false"
    />
    <task-bar
      class="taskbar"
      :data="explorer"
      @startClick="startMenuShow=!startMenuShow"
      @taskItemClick="toggleExplorer"
      @taskBarRightClick="openTaskBarContextMenu"
      @taskItemRightClick="openTaskItemContextMenu"
      @explorerOpen="openExplorer"
    />
    <context-menu
      v-show="menuData.show"
      class="contextmenu"
      :data="menuData"
      @explorerOpen="openExplorer"
      @taskAllClose="closeExplorerAll"
      @taskItemClose="closeExplorer"
      @taskAllMinimize="minimizeExplorerAll"
      @deskShortcutAdd="createFavourite"
      @deskShortcutDelete="removeFavourite"
      @mouseleave.native="menuData.show=false"
    />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
const components = {
  StartMenu: () => import('@windows/StartMenu.vue'),
  TaskBar: () => import('@windows/TaskBar.vue'),
  DeskTop: () => import('@windows/DeskTop.vue'),
  Explorer: () => import('@windows/Explorer.vue'),
  ContextMenu: () => import('@windows/ContextMenu.vue')
}
export default {
  name: 'Windows',
  components,
  data() {
    return {
      startMenuShow: false,
      explorer: [],
      menuData: {
        show: false,
        list: ['startMenu', 'deskItemMenu', 'taskBarMenu', 'taskItemMenu'],
        type: '',
        axios: {},
        item: {},
        index: 99
      },
      defaultWindow: {
        x: 10,
        y: 20,
        w: 800,
        h: 600,
        z: 0,
        tack: false,
        max: false,
        min: false,
        active: true
      }
    }
  },
  computed: mapState({
    user: state => state.authentication.data,
    menu: state => state.userProfile.menu,
    desktop: state => state.userProfile.favourite
  }),
  methods: {
    ...mapActions({
      signOut: 'signOut',
      addFavourite: 'userProfile/addFavourite',
      deleteFavourite: 'userProfile/deleteFavourite'
    }),
    removeFavourite(item) {
      if (item.relation_uid) {
        this.deleteFavourite([{ uid: item.relation_uid }])
      }
    },
    createFavourite(item) {
      let hasItem = false
      for (const val of this.desktop) {
        if (item.uid === val.uid) {
          hasItem = true
          break
        }
      }
      if (!hasItem) {
        this.addFavourite([{ uid: item.uid }])
      }
    },
    // 拖拽窗口
    dragExplorer(displacement, item) {
      item.window.x += displacement.x
      item.window.y += displacement.y
    },
    // (点击窗口),使窗口获取焦点,并置于最上
    activeExplorer(item) {
      for (const exp of this.explorer) {
        exp.window.active = false
        if (exp.window.z > item.window.z) {
          exp.window.z--
        }
      }
      item.window.min = false
      item.window.active = true
      item.window.z = this.explorer.length - 1
    },
    // (双击开始菜单功能,或双击桌面功能图标,或右击桌面功能图樯,菜单选择<打开>),打开窗口
    openExplorer(item) {
      if (item.info &&
        item.info.openNew &&
        item.info.openNew.trim().toLowerCase() === 'true' &&
        item.info.linkUrl &&
        item.info.linkUrl.trim()) {
        window.open(item.info.linkUrl)
      } else if (item.relation_flag === null) {
        this.$message.warning('您暂无权限使用该功能!')
      } else {
        let existExplorer = false
        for (const exp of this.explorer) {
          // 不打开重复窗口(页面一致且内容一致)
          if (exp.uid === item.uid && (!exp.data || !item.data || exp.data.uid === item.data.uid)) {
            existExplorer = true
            item = { ...item, ...exp }
            break
          }
        }
        if (!existExplorer) {
          const window = {
            z: this.explorer.length,
            x: this.defaultWindow.x * (1 + this.explorer.length),
            y: this.defaultWindow.y * (1 + this.explorer.length)
          }
          item = { ...item, window: { ...this.defaultWindow, ...window }}
          this.explorer.push(item)
        }
        this.activeExplorer(item)
      }
    },
    // (在任务栏右击已打开窗口图标,菜单选择<关闭>,或双击窗口左上角图标),关闭窗口
    closeExplorer(item, index) {
      this.explorer.splice(index, 1)
    },
    // (在任务栏右击,菜单选择<关闭所有>),闭关所有打开的窗口
    closeExplorerAll() {
      this.explorer = []
    },
    // (在任务栏单击已打开窗口图标),窗口在最小化和还原(最大化)模式中切换
    toggleExplorer(item, index) {
      // this.$refs.explorer[index].$emit('toggleExplorer');
      item.window.min = !item.window.min && item.window.active
      this.activeExplorer(item)
    },
    // (在任务栏右击已打开窗口图标,菜单选择<最大化>),切换窗口为最大化
    maximizeExplorer(item, index, event) {
      item.window.min = false
      item.window.max = !item.window.max
    },
    // (在任务栏右击已打开窗口图标,菜单选择<最小化>),切换窗口为最大化
    minimizeExplorer(item, index) {
      item.window.min = true
    },
    // 最小化所有窗口,显示桌面
    minimizeExplorerAll() {
      for (const item of this.explorer) {
        item.window.min = true
      }
    },
    // 全屏窗口,header显示
    tackExplorer() {
      for (const item of this.explorer) {
        item.window.tack = !item.window.tack
      }
    },
    // 右键菜单
    openContextMenu(event, item, index) {
      this.menuData = { ...this.menuData, item, index, axios: { x: event.clientX, y: event.clientY }}
      this.menuData.show = true
    },
    // 开始菜单右键菜单
    openStartMenuContextMenu(item, event) {
      this.menuData.type = this.menuData.list[0]
      this.openContextMenu(event, item)
    },
    // 桌面快捷方式右键菜单
    openDeskItemContextMenu(item, index, event) {
      this.menuData.type = this.menuData.list[1]
      this.openContextMenu(event, item, index)
    },
    // 任务栏右键菜单
    openTaskBarContextMenu(event) {
      this.menuData.type = this.menuData.list[2]
      this.openContextMenu(event)
    },
    // 任务栏窗口图标右键菜单
    openTaskItemContextMenu(item, index, event) {
      this.menuData.type = this.menuData.list[3]
      this.openContextMenu(event, item, index)
    },
    // 未处理事件
    unhandleEvent(event) {
      // console.log('event not define', event);
    }
  }
}
</script>

<style type="text/css">
html{font-size:62.5%;}
body {
  background-image: url(../../assets/image/window_bk.jpg);
}
.web-windows {
  flex-grow: 1;
}
.desktop {
  max-height: 75rem;
}
.startmenu {
  position: absolute;
  height: 45rem;
  width: 20rem;
  z-index: 100;
  left: 0;
  bottom: 2.5rem;
}
.taskbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  z-index: 101;
  overflow: hidden;
  background: #000409;
}
.contextmenu{
  position: absolute;
  z-index: 102;
}
.explorer {
  min-width: 10rem;
  min-height: 20rem;
  position: absolute;
  background:#FFF;
  resize: both;
  overflow: auto;
  border: .1rem solid #cccccc;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
}
</style>
